Community Central Blogs/Coding a box
Okay, this thing on??? Oh Sweet! Hey guys, its Slay again with another how to type blog. In my last blog, I feel like I may have left some users hanging when I added the border and the border radius... So, I've decided its time for a more indepth template making blog! *Refer to The If and The Switch for how to use #if: and #switch: *I will not be using If or Switch in this template tutorial, I will instead be building a header card for my blogs. That being said, you guys get to buckle your seatbelts, and hold on for the ride, because we're going to hit the code rode! :D Lets get started! What I Want What I think I want, is a blue box with a nice curve.... I might even fill the box with the same color as the border, leave part of it transparent, use white font on the background fill..... Woah... Hey guys you caught me deciding what I was going to for my template! c: Once upon a time i got stuck at the thinking part, and I know some of you guys, and girls, are there too! It can be extremely dissapointing to see something in your head, but not be able to produce that look on the computer screen... A border First I want to tell wiki to make a table so I'm going to type: ' Now, I want a dark blue border... So what do I do to the above coding? Well that's the best part! I'm going to add style="border:3px solid darkblue;" after my ' *This gives us: Some Radius For That Border Okay so now we want some radius to the outside border... That can be a real head scratching problem if you don't know what to do, but don't worry. We're going to use border-radius:9px; inside of the *This gives us: A Little Center Goes a Long Way Okay, now I want to center the table, because it's going to look funny if it's just hanging off to one side... So we're going to put align="center" before or after the style="blah". It doesn't really matter where you put it, just as long as it goes on the same line as the *This gives us: Stretch It Out Man! Okay... Tiny table is no good, it needs to be wiiiiiidddderrrrr. Well we have another simple solution. What I'm going to do is nest width="70%" in between align="center" and style="blah". Now the width bit, could be put in before the align portion, or it could be after the style section. I however, like to put the width part in between style and align. c: *This gives us: Centered is Bettered Woah.... dude center line defense, GO! O.O Are we talking football? Or are we talking coding? Well, either one is fine, because sometimes you want to have something in the center. In this case we want the text centered on the line. So we're going to do something fancy. Right before the text "My name is Inigo Montoya!", we're going to put style="text-align:center;"| so that style="blah" touches the |''' that is already there. Then we are going to put text-align:center;. The '''text tells the template that we want to change the text. The '-align:' tells the template that we want to change the alignment of the text. Center tells the template where we want the text to be aligned to. We could also put left or right. But you know, "Centered is Bettered"... *This gives us: Oh No! My Color is Dull... Ugh.... Totally didn't get the right lipstick, eyeliner, or nail polish to go with that dress, I looked like a mess! (O.O) For a girl, that's a big, big, biiiig problem, and it can be a big problem for people's eyes when they are reading on the computer screen. Well, in this case, it isn't really a matter of, "GAAAAAAAAH MY EYES ARE ON FIRE I CAN'T READ THIS!!!!!!!" Its merely a, "Oh, I think this color would look much better here. c:" To do such a thing, we're going to go to the area that we want to change to color in, and, since we want to change the color for our random text, we'll put color:darkblue; after text-align:center;. The color: tells the template that we are changing the color, and the darkblue; is just the color that we want the template to display. *This gives us: Needs A Text Area! Hmmmm.... I might have slipped and fell, because a blog box... needs to have a spot for blogs doesn't it? If you were wondering when I was going to get to that, that's great, because now we can put in another |- and another |with some text. I'm also going to make the Header, "Slay ~~ Sam's Blogs" an actual header. We can do that by making the pipe, or the |''' on the very left of that row, an exclamation mark. *This gives us: Still What About the Fill? Now, we're going to make |yay i can link blogs in here!! be: |style="background-color:darkblue; color:#ffffff;"|yay i can link blogs in here!!. All that we've done in this is specify that the template should change the '''background and then '-color:' tells the template what we want to change about the background. We will then put color:#FFFFFF; because #FFFFFF equals the color white. *This gives us: Who Wants a Box With White Space? WOAH, hold up, the last box looked kinda dorky with that white space.... it felt so unnatural... Well, we can take care of that pretty quickly! We're going to put cellspacing="0px" in between align="center" and width="70%". The cellspacing is the amount of space in between each cell.... "Slay, hold up! What the heck is a cell?!" You might be saying/asking/demanding. Well, each pipe or exclamation point, starts a new cell when you put it after a |-'. With that being said, you might ask, '"But you said the amount of space between each cell?", well, you can have more than one pipe or exclamation point in between two |-''s. All we're doing is telling the table to take away all the cellspacing. c: *This gives us: Now What About some Padding? Okay so now we want padding... Remember how in the last box the white text was right on the border? Well, we're going to fix that by adding padding-left:35px; and padding-right:35px; and padding-top:10px;. See if you can find where I put the padding in the box below. c: *This gives us: Now to Link All My Blogs Now we just add some links! These are links to my current blogs. When we put them in, your eyes will go O.O to o.o to e.e to -.- as you squint and try to focus reading the color of the link against the dark blue background. *This gives us: Make the Links POP In this part, all that we've done is add a little span tag with some styling. [[User_blog:Slayingthehalcyon/The_If_and_the_Switch|''The If and the Switch]], will give us white links. How? You might ask, well after the pipe or '''| we put and this tells the template what color the link will show up as. Then after our desired text, we put a tag. I also added two apostrophes on both sides of my text inside the span tags, this makes the text italicized. *This gives us: *This gives us: Putting in More Links I'm going to add more links, and it's just the same as before, except I've added a new |-''' at the bottom, and '''!style="text-align:center;"| after it, so that I have a header like font area. I'm also going to span tags again, and color the links a darkblue color. *This gives us: Adding More White Space Okay so we want to have a box "in the center" kinda sorta, well that's pretty easy too! I'll explain this one in the because it will be a lot easier like that! *This gives us: Adding a Little More Radius Well... boring boxiness is boring, but good in its place and time. I personally enjoy a little bit of border radius, so we're going to make that center blue box rounded by a few PX. *This gives us: